<template>
<div>
     <topbar title="我的预约"></topbar>
 <div class="cart">
     <li>
         <a href="#"></a>
         <p>已购买</p>
         <span>{{userinfo.buy_count}}次</span>
     </li>
     <li>
         <a href="#"></a>
         <p>剩余</p>
         <span>{{userinfo.end_count}}次</span>
     </li>
 </div>
 <div class="bot">
     <ul>
     <span class="left"></span>
     <p>预约记录</p>
     </ul>
     <li v-for="(item,index) in myorder" :key="index">
         <a href="#"></a>
         <p>巧手在家(金牛区分店)<span>保洁清洗</span></p>
         <span>{{item.start_time}}</span>
     </li>

 </div>

    
 </div>
</template>

<script>
import topbar from "../components/topNav.vue" 
import api from "../axios/api.js";
export default {
    
    data() {
            return {
                myorder:[], 
                userinfo:[], 
                   }
        },
        mounted(){
            let ID = localStorage.getItem("ID")
            this.ID = ID
              
                if(localStorage.getItem("id")){
            this.ID = localStorage.getItem("id")
         }
            this.myAppoint()
            this.getuser()
           
        },
        methods:{
            myAppoint(){
                // this.time = this.time1 +" " + this.time2
                let data = {
                    id: this.ID,
                    state:1,
                };
            this.$post(api.myAppoint,data).then(
              res => {
            if (res.code == 200) {
                // this.$toast.success(res.msg);
                this.myorder = res.data
                  }else{
              this.$toast.fail(res.msg);
            }
          });
            },
             getuser(){
            this.$post(api.userInfo,{id:this.ID}).then(
              res => {
            if (res.code == 200) {
                // this.$toast.success(res.msg);
                console.log(res)
                this.userinfo = res.data
                  }else{
              this.$toast.fail(res.msg);
            }
          });
          },
        },
        components:{
            topbar
        }
}
</script>

<style lang="less" scoped>
.space {
  padding-top: 10px;
  background-color: #f6f6f6;
}
.space1 {
  height: 80px;
  background-color: #f6f6f6;
}
.cart {
    
    width: 95%;
    margin: 0 auto;
    background-image: linear-gradient(#3fbdf1,#008ec9 );
    border-radius: 10px;
    height: 90px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    li:nth-child(2) a{
        background: url("../assets/last.png") no-repeat;
        background-size: 100%;
    }
    li:nth-child(2)  {
        border-top: 1px solid #dedede;
    }
    li{
        display: flex;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        
        a {
            width: 15px;
            height: 17px;
            background: url("../assets/cart.png") no-repeat;
            background-size: 100%;
            margin-left: 10px;
        }
        p{
            color: #fff;
            width: 65%;
            margin: 5px;
            margin-left: 10px;
        }
        span {
            color: #fff;
        }
    }
}
 .bot {
    width: 90%;
    margin: 0 auto;
     
     ul {
         margin-top: 10px;
         display: flex;
         align-items: center;
         span {
             height: 20px;
             border-left: 6px solid #5ec7f3;
             margin-left: 5px;
             border-radius: 15px;
         }
         p{
            margin: 0;
            margin-left: 5px; 
            font-weight: 600;
            font-size: 15px;
         }
     }
     li {
         margin-top: 10px;
         display: flex;
         align-items: center;
         padding: 5px;
         box-shadow: 1px 1px 5px  #ccc;
         border-radius: 10px;
         
         a{
             width: 60px;
             height: 50px;
             background: url("../assets/logo.png") 4px 10px  no-repeat;
             background-size: 100%;
             border: 1px solid #f6f6f6;
             border-radius: 50%;
         }
         p{
             font-size: 12px;
             width: 50%;
             margin-left: 8px;
             span {
                 display: block;
             }
             }
         >span {
             font-size: 13px;
             color: #7a7a7a;
         }
         
     }
 }            
</style>